<template>
	<view :class="themeStyle">
		<!-- #ifdef APP-PLUS || MP -->
			<view class="info-head">
				<!-- <view class="head-nav" :class="{active:isIphoneX}"></view> -->
				<uni-nav-bar left-icon="back" title="直播间" :border="false" @clickLeft="navBarLeft" ></uni-nav-bar>
			</view>
		<!-- #endif -->
		
		<view class="">
			<!-- 搜索区域 -->	
			<view class="search-wrap uni-flex uni-row">
				<view class="flex-item input-wrap">
					<input class="uni-input search-input" maxlength="50" confirm-type="search" v-model="search_text" @confirm="search()" placeholder="请输入您要搜索的主播" />
					<text class="iconfont iconIcon_search" @click="search()"></text>
				</view>
			</view>
			<!--头像 主播列表 -->
		 
			<view class="anchor-list" v-if="issearch && anchorList.length > 0"> 
				<block v-show="anchorList.length > 0" >
					<view class="anchor-item"  v-for="(anchoritem, anchorindex) in anchorList" :key="anchorindex"   @click="onClickRoom(anchoritem.roomid,anchoritem.live_status)"  >
						<view class="image">
							<image :src="$util.img(anchoritem.anchor_img)" mode=""></image>
						</view>
						<view class="anchor-status">
							<view class="garden"></view>直播中
						</view>
						<text class="anchor-name">{{anchoritem.anchor_name}}</text>
					</view>
				</block>
			</view>
		</view>
		
		<view class="title-big-text" v-if="issearch"  >
			热门直播
		</view>
	
		<!-- 下拉主播列表 -->
		<mescroll-uni @getData="getData" refs="mescroll" :top="listTop" class="live-list">
			<view slot="list" >
				<view v-if="roomList.length > 0">
				
					<view class="roomList"  v-for="(roomitem,roomindex) in roomList " :key="roomindex"  @click="onClickRoom(roomitem.roomid,roomitem.live_status)" >
						<view class="room-item" style="display: flex; flex-direction: column; " >
							<image :src="$util.img(roomitem.room_img)" mode="aspectFill" style="border-radius: 10rpx;"></image>
							<view class="status" v-if="roomitem.live_status == 101 "><text>直播中</text></view>
							<view class="status" v-if="roomitem.live_status == 102 "><text>直播结束</text></view>
						</view>
						<view class="" style="padding-left: 28rpx; display: flex; justify-content: space-around; flex-direction: column;">
							<text style="font-size: 30rpx; ">{{roomitem.room_name}}</text>
							<view class="">
								<image :src="$util.img(roomitem.shop_img)" mode="" style="border-radius: 50%; width: 42rpx; height: 42rpx; vertical-align:middle ; margin-right: 12rpx; "></image>
								<text style="vertical-align:middle; font-size: 26rpx; color: #909399;">{{roomitem.shop_name}}</text>
								
							</view>
							<view class="">
								<view class="goods-list" >
									<view class="goods-img" v-for="(item,index) in roomitem.goods.filter((ite,idx) => idx < 3)" :key="index" style="">
										<view class="mask" v-if="index == 2" style="">
											{{roomitem.goods.length}}件
										</view>
										<image :src="$util.img(item.sku_image)" mode="aspectFill" style="width: 107rpx;
												height: 110rpx; border-radius: 10rpx; border-radius: 10rpx; margin-right: 18rpx;"></image>
									</view>
								</view>
							</view>
							
						</view>
						 
					
					</view>
				</view>
				<view v-if="roomList.length <= 0">
					<view class="empty_img"><image :src="$util.img('upload/uniapp/common-empty.png')" mode="aspectFit"></image></view>
					<view class="empty-text">暂无主播直播</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import Config from '@/common/js/config.js'
	//LVB插件对象
	// #ifdef APP-PLUS
	var sdkwx = uni.requireNativePlugin('TXMLVB-LiveRoom');
	var sdk = uni.requireNativePlugin('TXMLVB-SdkWX');
	
	var pusher = uni.requireNativePlugin('TXMLVB-Pusher');
	// #endif
	
		
	
	export default {
		components: {
			uniNavBar,
			Config
		},
		data() {
			return {
				btn:{text:''},
				roomList: [],
				rooms: [],
				is_roomList:false,
				dataList: [],
				isSubmit: false,
				anchorList:[
				],
				search_text:'',
				count:0,//直播总数
				mescroll:null,//mescroll对象
				issearch:true,
				listTop:575,
				UserID:0,
				UserSig:'',
			}
		},
		onUnload() {
			//退出登录
			// sdkwx.logout();
			
		},
		mixins: [Config],
		onLoad(options) {
			 this.getFocusLive();
			
		},
		
		onShow() {
			var licenceURL = Config.licenceURL;
			var licenceKey = Config.licenceKey;
			
			let platform=uni.getSystemInfoSync().platform
			 
			if(platform=='ios'){
				sdkwx.logout();
			 }
			 
			sdk.setLicence(licenceURL, licenceKey);
			let that =  this
			this.$api.sendRequest({
				url: '/api/Memberliveplay/getUserSig',
				data: {},
				success: res => {
					uni.setStorageSync('live_uid', res.UserID);
					let user_info = uni.getStorageSync('userInfo');
					let UserID = res.UserID
					let UserSig = res.UserSig
					
					sdkwx.login({
						sdkAppID:Config.imAppid,//直播的appID
						userID:UserID+'',//用户ID
						userName:user_info.nickname,//用户名称
						userAvatar:user_info.headimg,//用户头像
						userSig:UserSig ,//签名，参考腾讯官方文档
						
					}, function(res){
						that.getRoomList();
						// sdkwx.logout();
						
						that.getUserSig();
						
						
						that.getFocusLive();
						if (res.code == 0) {
							console.log("Member login success");
						} else {
							console.log("Member login failed! ", "errCode：" + res.code + ", errMsg:" + res.data);
						}
					});
				}
			})
			
			
			
		},
		computed: {
			themeStyle() {
				return 'theme-' + this.$store.state.index.themeStyle
			},
			starColor() {
				return this.$store.state.index.baseColor
			}
		},
		created() {
			
		},
	
		methods: {
			getUserSig(){
				let that =  this
				this.$api.sendRequest({
					url: '/api/Memberliveplay/getUserSig',
					data: {},
					success: res => {
						uni.setStorageSync('live_uid', res.UserID);
						that.UserID = res.UserID
						that.UserSig = res.UserSig
					}
				})
			},
			// 我关注的主播
			getFocusLive(){
				let that = this;
				that.$api.sendRequest({
					url: '/api/Memberliveplay/getFocusLive',
					data: {
					},
					success: res => {
						console.log(res);
						if(res.code == 0){
							
							that.anchorList = res.data.list
							if(that.search_text){
								that.listTop = 300;
								that.issearch = false;
							}else if(that.anchorList.length>0 ){
								that.listTop = 575;
								that.issearch = true;
							}else {
								that.listTop = 390;
								that.issearch = true;
							}

							
						}
					},
				});
			},
			// 搜索
			search(){
				if(this.search_text){
					this.listTop = 300;
					this.issearch = false;
				}else if(this.anchorList.length>0){
					this.listTop = 575;
					this.issearch = true;
				}else {
					this.listTop = 390;
					this.issearch = true;
				}
				
				this.mescroll.num = 1;
				this.getData();
				 
			},
			
			login(){
				//观众登录
				var uid =  this.UserID+'';
				var sig =  this.UserSig;
				var memberInfo = uni.getStorageSync('userInfo');
				
				sdkwx.login({
					sdkAppID:Config.imAppid,//直播的appID
					userID:uid,//用户ID
					userName:memberInfo.nickname,//用户名称
					userAvatar:memberInfo.headimg,//用户头像
					userSig:sig //签名，参考腾讯官方文档
				}, function(res){
					console.log('登录，',res);
					if (res.code == 0) {
						 
					} else {
						console.log("login failed! ", "errCode：" + res.code + ", errMsg:" + res.data);
					}
				});
			},
			
			/**
			 * 分页数据
			 * @param {Object} mescroll
			 */
			getData(mescroll) {
				let that = this;
				if(mescroll) this.mescroll = mescroll;
				
				this.$api.sendRequest({
					url: '/api/Memberliveplay/roomList',
					data: {
						page: this.mescroll.num,
						page_size: this.mescroll.size,
						search_text: this.search_text
					},
					success: res => {
						if(res.code == 0){
							let list = res.data.list;
							that.count= res.data.count;
							if (this.mescroll.num == 1){
								that.roomList = [];
								this.getRoomList();
							}
								
							that.roomList = that.roomList.concat(list);
							this.mescroll.endBySize(list.length, that.count);
							// this.issearch = 1
						}else{
							this.mescroll.endErr()
						}
						
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: res => {
						this.mescroll.endErr();
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			getRoomList() {
				//获取房间列表
				var index = 0; //开始索引
				var count = 50; //房间个数
				let that = this;
				sdkwx.getRoomList(index, count, function(res) {
				 
					if (res.code == 0) {
						//显示房间列表
						var roomInfos = res.data;
						
						
						that.rooms = roomInfos
						
					}
				});
				this.getData()
			},
			onClickRoom(roomID,live_status) {
				let that = this;
				if(live_status == 102){
					this.$util.showToast({title:'该主播已下播'})
					return false;
				}
					// //观众登录
					// var uid =  this.UserID+'';
					// var sig =  this.UserSig;
					// var memberInfo = uni.getStorageSync('userInfo');
					
					// sdkwx.login({
					// 	sdkAppID:Config.imAppid,//直播的appID
					// 	userID:uid,//用户ID
					// 	userName:memberInfo.nickname,//用户名称
					// 	userAvatar:memberInfo.headimg,//用户头像
					// 	userSig:sig //签名，参考腾讯官方文档
					// }, function(res){
					// 	console.log('登录，',res);
					// 	if (res.code == 0) {
					// 		//进入直播
					// 		console.log(that.rooms);
							setTimeout(function() {
							uni.navigateTo({
								url: '/otherpages/member/lives/index/room?roomID='+ roomID,
							});
							}, 1000);
					// 	} else {
					// 		console.log("login failed! ", "errCode：" + res.code + ", errMsg:" + res.data);
					// 	}
					// });
				
				
			},
			
			// onClickPlay() {
			// 	//拉流
			// 	uni.navigateTo({
			// 		url:'/otherpages/member/lives/index/player'
			// 	});
			// }
			
			// 
			navBarLeft(){
				this.$util.redirectTo('/pages/member/index/index',{})
			},
			// 
			// roomInfos() {
			// 	console.log(this.roomID);
			// 	this.$api.sendRequest({
			// 		url: '/api/Memberliveplay/roomInfo',
			// 		data: {
			// 			 roomid: this.roomID
			// 		},
			// 		success: res => {
			// 			console.log(res);
			// 			this.anchorList = res
			// 			// this.goodsList = res.goods_info
			// 		}
			// 	});
				
			// },	
			
			
			
		}
	}
</script>

<style lang="scss">
	.empty-text{
		color: #999;
		margin-top: 20rpx;
		text-align: center;
	}
	.empty_img {
		width: 206rpx;
		height: 206rpx;
		margin: 100rpx auto;
		image {
			width: 100%;
			height: 100%;
			padding-bottom: $ns-margin;
		}
	}
	/deep/uni-page{
		background: #EFF1F4!important;
	}
	/*  #ifdef APP-PLUS */

	/*  #endif  */
	// /deep/uni-scroll-view{
	// 	top:650rpx!important;
	// }
	
	/* 搜索区域*/
	.search-wrap {
		padding: 20rpx 20rpx !important;
		background-color: #FFFFFF;
		position: relative;
		z-index: 100;
		flex: 0.5;
		font-size: 12rpx;
		display: flex;
		align-items: center;
		.input-wrap{
			flex: 1;
			margin: 0 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			padding-left: 10rpx;
			border-radius: 40rpx;
			background-color: #f8f8f8;
			.search-input{
				background-color: #f8f8f8;
				font-size: 28rpx;
				height: 50rpx;
				padding: 14rpx 24rpx 14rpx 24px;
				line-height: 50rpx;
				border-radius: 20rpx;
				width: 80%;
				
			}
			text{
				    font-size: 40rpx;
				    color: #898989;
				    width: 100rpx;
				    text-align: center;
				    margin-right: 20rpx;
				}
		}
	}
	
	/* 主播头像 */
	.anchor-list{
		// margin: 0rpx 0 104rpx  34rpx;
		padding-left: 20rpx;
		display: flex;
		background-color: #FFFFFF;
		overflow-x: auto;
		.anchor-item{
			position: relative;
			width: 126rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 0 20rpx;
			.image{
				width: 100%;
				height: 126rpx;
				border: 1rpx solid #F70436;
				border-radius: 50%;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width: 108rpx;
					height: 116rpx;
					border-radius: 50%;
				}
			}
			.anchor-status{
				width: 108rpx;
				height: 32rpx;
				line-height: 32rpx;
				background: linear-gradient(88deg, #F80126 100%, #F84B23 100%);
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				color: #FFFFFF;
				position: absolute;
				top: 106rpx;
				left: 50%;
				margin-left: -62rpx;
				padding: 0 10rpx 0 10rpx;
				.garden{
					width: 10rpx;
					height: 10rpx;
					font-size: 22rpx;
					border-radius: 50%;
					background: #fff;
					margin-right: 10rpx;
				}
			}
			
			.anchor-name{
				padding: 10rpx 10rpx;
				display: inline-block;
				text-align: center;
				max-width: 90%;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}
		}
	}
	
	.info-head {
		box-shadow: 0px 5px 20px 0px #F5F5F5;
		margin-top: 100rpx;
		.head-nav {
			width: 100%;
			height: var(--status-bar-height);
			background: #ffffff;
		}
	
		.head-nav.active {
			padding-top: 40rpx;
		}
	}
	
	// 
	.title-big-text{
		font-weight: 500;
		font-size: 32rpx;
		// line-height: 36rpx;
		margin: 43rpx 0 21rpx 40rpx;
	}
	.roomList{
		display: flex;  margin: 10rpx 40rpx ; border-radius: 10rpx;    background: #fff; 
		margin-bottom: 10rpx;
		.room-item{
			width: 261rpx;
			height: 340rpx;
			border-radius: 10rpx;
			image{
				width: 100%;
				height: 100%;
			}
			.status{
				    position: absolute;
				    margin-top: 7px;
				    margin-left: 7px;
				    padding: 0 7px;
				    background-color: rgba(0,0,0,.35);
				    color: #fff;
				    border-radius: 12px;
			}
			
		}
		.goods-list{
			display: flex; width: 372rpx;
			.goods-img{
				position: relative;
			}
			.mask{
				border-radius: 10rpx;  position: absolute;width:107rpx;height:110rpx;background-color: rgba(0,0,0,.4);color: #fff;z-index: 9;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	
	.content-room {
		display: flex;
		justify-content: space-between;
		// justify-content: space-around;
		flex-wrap: wrap;
		box-sizing: border-box;
		margin: 0 20rpx 20rpx 20rpx;
		// background-color: red;
		// width: 140rpx;
		.room-list {
			display: flex;
			flex-direction: column;
			// flex-wrap: wrap;
			image {
				width: 290rpx;
				height: 290rpx;
			}
			.room-list-item {
				display: flex;
				flex-direction: column;
				justify-content: center; 
				align-items: center;
				margin: 15rpx 0;
				box-sizing: border-box;
			}
		}
	}
	/deep/.mescroll-upwarp{
		padding: 0rpx;
	}

</style>
